<div id="component-form-step-2" class="" action="" lay-filter="component-form-step-2">
    <p>
        <button class="layui-btn layui-btn-xs" @click.stop.prevent="addRow"><i class="layui-icon">&#xe608;</i> 添加行</button>
        <button class="layui-btn layui-btn-xs" @click.stop.prevent="addCol"><i class="layui-icon">&#xe608;</i> 添加列</button>
    </p>
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col width="200" v-for="(col,i) in cols" v-if="cols.length>0">
            <col width="150">
            <col width="250">
            <col width="250">
            <col width="100">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th v-for="(col,i) in cols" v-if="cols.length>0">
                <input type="text" v-model="col.value" placeholder="请输入规格名称" autocomplete="off" class="layui-input">
                <button class="layui-btn layui-btn-xs" @click.stop.prevent="delCol(i)"><i class="layui-icon">&#xe640; 删除</i></button>
            </th>
            <th>产品主图</th>
            <th>价格</th>
            <th>型号</th>
            <th>快捷设置</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(row,i) in rows">
            <td>{{i+1}}</td>
            <td v-for="(col,ii) in cols" v-if="cols.length>0">
                <input type="text" v-model="row.cols[ii]" placeholder="请输入规格值" autocomplete="off" class="layui-input">
            </td>
            <td>
                <p v-for="img in row['product_images']">
                    <img :src="img" width="30" height="30">
                    <label><input type="radio" :value="img" v-model="row['images']">默认</label>
                </p>
            </td>
            <td>
                <div class="layui-form-item">
                    <label>
                        市场销售价格:
                        <input type="number" v-model="row['price']" placeholder="请输入市场销售价格" autocomplete="off" class="layui-input">
                    </label>
                </div>
                <div class="layui-form-item">
                    <label>
                        原价:
                        <input type="number" v-model="row['original_price']" placeholder="请输入原价" autocomplete="off" class="layui-input">
                    </label>
                </div>
            </td>
            <td>
                <div class="layui-form-item">
                    <label>
                        重量（kg）:
                        <input type="text" v-model="row['weight']" placeholder="请输入重量（kg）" autocomplete="off" class="layui-input">
                    </label>
                </div>
                <div class="layui-form-item">
                    <label>
                        编码:
                        <input type="text" v-model="row['coding']" placeholder="请输入编码" autocomplete="off" class="layui-input">
                    </label>
                </div>
                <div class="layui-form-item">
                    <label>
                        条形码:
                        <input type="text" v-model="row['barcode']" placeholder="请输入条形码" autocomplete="off" class="layui-input">
                    </label>
                </div>
                <div class="layui-form-item">
                    <label>
                        库存:
                        <input type="text" v-model="row['inventory']" placeholder="请输入库存" autocomplete="off" class="layui-input">
                    </label>
                </div>
            </td>
            <td>
                <p style="text-align: center;"><label><input type="checkbox" value="1" v-model="row['is_shelves']">上架</label></p>
            </td>
            <td><button class="layui-btn" @click.stop.prevent="delRow(i)"><i class="layui-icon">&#xe640;</i></button></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    (function () {
        // 初始化一个VUE对象
        var add_step2 = new Vue({
            'el' : '#component-form-step-2',
            'data' : {
                // 列
                cols : [],
                // 行
                rows : []
            },
            methods : {
                addRow : function () {
                    var self = this;
                    var cols = [];
                    // 添加每一行中的cols
                    for(var k in self.cols){
                        cols.push('');
                    }
                    self.rows.push({
                        cols:cols,
                        id:'',
                        product_images: add_step1.product_images,
                        images:'',
                        price:'0.00',
                        inventory : '0',
                        is_shelves : [],
                        weight:'0.00',
                        coding:'',
                        barcode:'',
                        original_price:'0.00'
                    });
                },
                delRow : function (i) {
                    var self = this;
                    if(self.rows.length <= 1){
                        layer.msg("产品必须保留一个规格", {icon: 2});
                        return false;
                    }
                    if(!!self.rows[i]['product_id']){
                        layer.msg("产品上传之后无法进行删除，请自行下架或者编辑处理", {icon: 2});
                        return false;
                    }
                    self.rows.splice(i,1);
                },
                addCol : function () {
                    var self = this;
                    var l = self.cols.length;
                    self.cols.push({
                        value: ''
                    });
                    // 添加每一行中的cols
                    for(var k in self.rows){
                        self.rows[k]['cols'].push('');
                    }
                },
                delCol : function (i) {
                    var self = this;
                    self.cols.splice(i,1);
                    // 清空每一行中的cols第i列
                    for(var k in self.rows){
                        self.rows[k]['cols'].splice(i,1);
                    }
                },
                productImagesChange : function (product_images) {
                    var self = this;
                    for(var k in self.rows){
                        self.rows[k]['product_images'] = product_images;
                    }
                }
            },
            computed : {

            },
            watch : {

            }
        });

        // 编辑入参
        // (function (self) { // 添加列
        //     var spec_cols = ["颜色","尺寸"];
        //     for(var k in spec_cols){
        //         self.cols.push({
        //             value : spec_cols[k]
        //         });
        //     }
        // })(add_step2);
        // (function (self) { // 添加行
        //     var goods_spec = [{
        //         // id:'1',
        //         images:'http://yanxuan.nosdn.127.net/0b8981ab0aec1589de1f4e665ee3a0a4.jpg',
        //         price:'8.01',
        //         inventory : '2',
        //         is_shelves : '1',
        //         weight:'2.02',
        //         coding:'cssdf',
        //         barcode:'122sdfsd',
        //         original_price:'3.01',
        //         value : ['白色','XL']
        //     },{
        //         // id:'2',
        //         images:'http://yanxuan.nosdn.127.net/e09b2cceadb6b471339e6cb16a60408b.jpg',
        //         price:'7.03',
        //         inventory : '3',
        //         is_shelves : '0',
        //         weight:'3.02',
        //         coding:'vvcssdf',
        //         barcode:'nn122sdfsd',
        //         original_price:'6.01',
        //         value : ['黑色','L']
        //     }];
        //     for(var k in goods_spec){
        //         var cols = [];
        //         for(var kk in goods_spec[k]['value']){
        //             cols.push(goods_spec[k]['value'][kk]);
        //         }
        //         self.rows.push({
        //             id:goods_spec[k]['id'],
        //             cols:cols,
        //             product_images: [
        //                 'http://yanxuan.nosdn.127.net/0b8981ab0aec1589de1f4e665ee3a0a4.jpg',
        //                 'http://yanxuan.nosdn.127.net/e09b2cceadb6b471339e6cb16a60408b.jpg',
        //                 'http://yanxuan.nosdn.127.net/6a50e39b3cbd718bd435aa4c208dc5ad.jpg',
        //                 'http://yanxuan.nosdn.127.net/ed9a103ee0f2f050837294277ab57645.jpg'
        //             ],
        //             images:goods_spec[k]['images'],
        //             price:goods_spec[k]['price'],
        //             inventory : goods_spec[k]['inventory'],
        //             is_shelves : goods_spec[k]['is_shelves']==1?['1']:[],
        //             weight:goods_spec[k]['weight'],
        //             coding:goods_spec[k]['coding'],
        //             barcode:goods_spec[k]['barcode'],
        //             original_price:goods_spec[k]['original_price']
        //         });
        //     }
        // })(add_step2);

        if(commParam['info'] !== null){
            // 编辑入参
            (function (self) { // 添加列
                var spec_cols = commParam['info']['spec_cols'];
                for(var k in spec_cols){
                    self.cols.push({
                        value : spec_cols[k]
                    });
                }
            })(add_step2);
            (function (self) { // 添加行
                var param = commParam['info'];
                var goods_spec = commParam['info']['spec_list'];
                for(var k in goods_spec){
                    var cols = [];
                    for(var kk in goods_spec[k]['value']){
                        cols.push(goods_spec[k]['value'][kk]);
                    }
                    self.rows.push({
                        id:goods_spec[k]['id'],
                        cols:cols,
                        product_images: param['photo_list'],
                        images:goods_spec[k]['images'],
                        price:goods_spec[k]['price'],
                        inventory : goods_spec[k]['inventory'],
                        is_shelves : goods_spec[k]['is_shelves']==1?['1']:[],
                        weight:goods_spec[k]['weight'],
                        coding:goods_spec[k]['coding'],
                        barcode:goods_spec[k]['barcode'],
                        original_price:goods_spec[k]['original_price']
                    });
                }
            })(add_step2);
        }else{
            setTimeout(function () {
                add_step2.addRow();
            },1000);
        }

        window.add_step2 = add_step2;
    })();
</script>